<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电商管理前端</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../styles/common.css" />
    <link rel="stylesheet" href="../styles/index.css" />
    <link rel="stylesheet" href="../styles/icon/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/all.css" />
    <link rel="stylesheet" type="text/css" href="../styles/pages-JD-index.css" />
    <link rel="stylesheet" type="text/css" href="../styles/pages-cart.css" />
    <style type="text/css">
        h4{
            font-size: 20px;
            line-height: 35px;
            text-align: center;
        }
        .tleft{
            color: red;
            font-size: 18px;
            float: left;
            width: 200px;
            margin-left: 60px;
        }
        .tright{
            color: #666666;
            float: left;
            width: 300px;
            font-size: 21px;
        }
    </style>
</head>
<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<div id="app">
    <!--顶部-->
    <div class="nav-top">
        <div class="top">
            <div class="py-container">
                <div class="shortcut">
                    <ul class="fl">
                        <span v-if="user===''">请<a href="/pages/userlogin.html">登录</a></span>
                        <span v-else>{{user}},欢迎你</span>
                        <span><a href="register.html">免费注册</a></span>
                    </ul>
                    <div class="fr typelist" style="margin-top: -29px">
                        <ul class="types" style="margin-left: 390px">
                            <li class="f-item">
                                <span>
                                    <a href="shopping.html">首页</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="cart.html">我的购物车</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="home.html">个人信息</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="/logout">退出</a>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--头部-->
        <div class="header">
            <div class="py-container">
                <div class="yui3-g Logo">
                    <div class="yui3-u Left logoArea">
                        <img src="../images/logo2.png" style="margin-left: -40px; height: 200px; width: 250px;margin-top: -30px;">
                    </div>
                    <div class="yui3-u Rit searchArea" style="margin-right: -100px;margin-top: 72px;font-size: 40px;font-family: '宋体';color: red;">
                        欢迎来到未来生活！
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="py-container">
            <!--product-info-->
            <div class="product-info">
                <div class="fl preview-wrap">
                    <div id="preview" class="spec-preview">
                        <span class="jqzoom">
                            <img :src="getpicture(goods.picture)" style="width: 300px;height: 300px;margin-top: 100px;margin-left: 100px;box-shadow: 0 12px 5px -10px rgba(0,0,0,0.1), 0 0 4px 0 rgba(0,0,0,0.1);">
                        </span>
                    </div>
                </div>
            </div>
        <div class="bd"style="box-shadow: 0 12px 5px -10px rgba(0,0,0,0.1), 0 0 4px 0 rgba(0,0,0,0.1);width: 600px;float: right;margin-top: -300px;margin-right: 80px">
            <div class="top2"><h4>商品详情</h4></div>
            <ul style="list-style: none">
                <li style="height: 60px"><div class="tleft">商品名称:</div><div class="tright">{{goods.name}}</div></li>
                <li style="height: 60px"><div class="tleft">商品价格:</div><div class="tright">¥{{goods.price}}</div></li>
                <li style="height: 60px"><div class="tleft">累计销量:</div><div class="tright">{{goods.number}}</div></li>
            </ul>
            <div class="summary-wrap" style="margin-left: 60px">
                <h5>选择购买数量</h5>
                <div class="fl title" style="margin-bottom: 10px">
                    <div class="control-group">
                        <div class="controls">
                            <input id="min" class="am-btn am-btn-default" style="width: 25px" type="button" value="-" @click="changeNumber(-1)":disabled="this.number===1"/>
                            <input style="width: 45px;text-align: center" v-model="number">
                            <input id="add" class="am-btn am-btn-default" style="width: 25px" type="button" value="+" @click="changeNumber(1)"/>
                        </div>
                    </div>
                </div>
                <div class="fl">
                    <ul class="btn-choose unstyled">
                        <li>
                            <a class="sui-btn  btn-danger" style="margin-bottom: 15px" @click="addGoods">加入购物车</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/login.js"></script>
<script type="text/javascript" src="../js/all.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<script>
    function getUrlParam(key){
        var url = decodeURI( window.location.toString() );
        var arr = url.split("?");
        if(arr.length>1){
            var params = arr[1].split("&");
            for(var i=0; i<params.length; i++){
                var param = params[i];  //"pid=101"
                if(param.split("=")[0] == key ){
                    return param.split("=")[1];
                }
            }
        }
        return null;
    }
</script>
<script>
    var vue = new Vue({
        el: '#app',
        data (){
            return {
                user:'',
                number:1,
                id:'',
                uid:'',
                goods:[],
            }
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.id=getUrlParam("id");
            console.log(this.id);
            axios.get("/goods/getgoods?id="+this.id).then((res) => {
                if(res.data.flag){
                    this.goods =res.data.data;
                }
            });
            axios.get("/user/getUsername").then((res) => {
                if(res.data.flag){
                    this.user=res.data.data;
                }
            });
            axios.get("/user/getUserid").then((res) => {
                if(res.data.flag){
                    this.uid=res.data.data;
                }
            })
        },
        methods: {
            getpicture(picture){
                return "http://106.13.226.130:9000/goods/"+picture;
            },
            changeNumber(m){
                if(m===-1){
                    this.number=parseInt(this.number)-1;
                }else if(m===1){
                    this.number=parseInt(this.number)+ 1;
                }
            },
            addGoods(){
                var param ={
                    "gid":this.id,
                    "uid":this.uid,
                    "number":this.number,
                    "price":this.goods.price
                };
                if (this.user===''){
                    this.$alert("请先登录才可添加至购物车！")
                    return false;
                }else{
                    axios.post("/shopcart/add",param).then((res) => {
                        if(res.data.flag){
                            this.$confirm('是否将该商品添加到您的购物车', '添加购物车', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消'
                            }).then(() => {
                                this.$alert('添加成功');
                            })
                        }else {
                            this.$alert("该商品已在您的购物车中");
                        }
                    })
                }
            }
        }
    })
</script>
</html>